<template>
	<view >
		<!-- 所有的图片 -->
		<view class="picture-list">
		<!-- 多选框 -->
			<checkbox-group class="checks" @change="checkboxChange">
				<label   v-for="item in studentPicList" class="view-img">
					
			<!-- 多选框 ,绑定图片的id-->
					<view class="choose1">
						<!-- 电子底片 -->
						<view v-if="!stuBuyPicList.includes(item.id) && bill.billType == 1 ">
							<checkbox :value="item.id" color= "#F5C046" class="choose"  ></checkbox>
						</view>
						
						<!-- 实体相册 -->
						<view v-if="!stuPutPicList.includes(item.id) && bill.billType == 0 ">
							<checkbox :value="item.id" color= "#F5C046" class="choose"  ></checkbox>
						</view>
					</view>
			<!-- 图片 -->
					<view class="picture-item">					
							<image :src="item.pictureUrl" class="img"></image>					
					</view>
				</label>
				
			</checkbox-group>
		</view>
		
	<!-- 已选照片 -->
		<view class="submit-btn">
			<button v-if="picCheck==picCount" class="btn1"  @click="addCheckPic()">提交(已选:{{picCheck}}/{{picCount}})</button>
			<view v-else class="btn2" ><p>提交(已选:{{picCheck}}/{{picCount}})</p></view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
			
			   bill:null,
				//提交的图片订单信息
				picBill:{
					//已选图片列表
					pictureIdList:[],
					//订单id
					billType:null,
					billId:null,
				},
				
				
				//学生id
				studentId:null,
				parentId:null,
				//所有图片列表
				studentPicList:[],
				//已选的底片
				stuBuyPicList:[],
				//已入册的底片
				stuPutPicList:[],
				
				//可选照片数量
				picCount:null,
				//已选照片数量
				picCheck:0,
	
	
			}
		},
		onLoad: function (option) {

			let bill = JSON.parse(decodeURIComponent(option.billInfo));
			this.bill = bill
			this.studentId = bill.studentId;
			this.parentId = uni.getStorageSync("parentId")
			//可选数量
			this.picCount = bill.picNum;
			this.getStuPicList()
			this.getCheckPictureList()
		},

		methods: {
			//获取所有的图片
			getStuPicList(){
				uni.$api.appPictureFindByStudentId(this.studentId).then(res=>{
					this.studentPicList = res
				})
			},
			//获取已选的图片,类型1--入册, 0--未入册
			getCheckPictureList(){
				//电子底片未入册相片
				if(this.bill.billType == 1){
					uni.$api.appBillPicFindList(this.studentId,this.parentId).then(result =>{
						this.stuBuyPicList = result
					})
				}else{
					//实体相册已入册相片
					uni.$api.appBillPicPutFindList(this.studentId,this.parentId).then(result =>{
						this.stuPutPicList = result
					})
				}
				
			},
			
			//多选框中的值, 获取已选图片id
			checkboxChange(e){
				let values = e.detail.value;
				//已选图片,列表长度
				this.picCheck = values.length;
				//列表的值
				this.picBill.pictureIdList = values;
					
				//最多选择
				if(values.length>=this.picCount){
					
					uni.showToast({
						title: '最多选择'+this.picCount+'张',
						icon: '',    //将值设置为 success 或者 ''
						duration: 1000,//持续时间为 2秒
						mask:true
					})

				}
			},
			
			//点击提交
			addCheckPic(){
				
				this.picBill.billType = this.bill.billType;
				this.picBill.billId = this.bill.id;
		
				uni.$api.pictureCheckAdd(this.picBill).then(res =>{
					//跳转到订单列表,显示已选
					uni.$common.navigateTo("/subpkg/parent/babypicture/babypicture")
					uni.$emit('photoUpdate')
				 })
			}
			
		}
	}
</script>

<style>
	.picture-list{
		position:relative;
		top: 20rpx;
	}
	.view-img{
		display: inline-block;
		/* border: 1px solid black; */
		width: 45%;
		margin-left: 25rpx;
		margin-top: 20rpx;
		
		height: 200rpx;
	}
	.choose1{
		height: 20rpx;
	}
	.choose{
		z-index: 1;
		position:relative;
		top: 0rpx;
		left: 20rpx;
	}
	.img{
		/* border: 1rpx solid red; */
		width: 100%;
		height: 100%;
		display: inline-block;
		margin-left: 0rpx;
		margin-top: 0rpx;
		border-radius: 20rpx;
	}
	/* 图片item */
	.picture-item{
		width: 100%;
		height: 200rpx;
		/* border: 1rpx solid blue; */
		display: inline-block;
		position:relative;
		top: -50rpx;
	}
	.checks{
		/* border: 45rpx solid green; */
		padding-bottom: 20%;
	}
	
	/* 提交 */
	.submit-btn{
		width: 100%;
		height: 10%;
		position: fixed;
		bottom: 0rpx;
		background-color: white;
		padding-top: 30rpx;
		z-index: 2;
		text-align: center;
	}
	/* 按钮 */
	.btn1{
		width: 40%;
		height: 60%;
		background-color: #FDC722;
		color: white;
		border-radius: 50rpx;
	}
	.btn2{
		width: 40%;
		height: 60%;
		background-color: #DDDDDD;
		color: white;
		border-radius: 50rpx;
		text-align: center;
		position:relative;
		left: 30%;
	}
	.btn2 p{
		line-height: 80rpx;
	}

</style>
